$(function () {
  //1.  初始化文章
  let form = layui.form
  initArtCateList()
  function initArtCateList() {
    axios({
      url: '/my/article/cates',
    }).then(({ data: res }) => {
      if (res.status !== 0) return layer.msg(res.message)
      //成功
      let arr = ['<option value="">请选择文章分类</option>']
      res.data.forEach(ele => {
        arr.push(`<option value="${ele.Id}">${ele.name}</option>`)
      })
      //循环结束赋值
      let str = arr.join('')
      $('[name="cate_id"]').empty().html(str)
      form.render()
    })
  }

  //2.初始化副文本编辑器
  initEditor()

  //3. 文章封面图片
  // 3.1. 初始化图片裁剪器
  let $image = $('#image')
  // 3.2. 裁剪选项
  let options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview',
  }
  // 3.3. 初始化裁剪区域
  $image.cropper(options)

  //4.  定义状态
  let state = ''
  $('#btn1').on('click', function () {
    state = '已发布'
  })
  $('#btn2').on('click', function () {
    state = '草稿'
  })
  //文章发布
  $('#formPub').on('submit', function (e) {
    e.preventDefault()
    let fd = new FormData(this)
    fd.append('state', state)

    //
    $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280,
      })
      .toBlob(function (blob) {
        // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        fd.append('cover_img', blob)
        // 发送axios
        axios({
          method: 'post',
          url: '/my/article/add',
          data: fd,
        }).then(({ data: res }) => {
          if (res.status !== 0) return layer.msg(res.message)
          // 成功提示
          if (state == '已发布') {
            layer.msg('恭喜您，添加文章成功!')
            setTimeout(() => {
              window.parent.document.querySelector('#art_list').click()
            }, 1000)
          } else if (state == '草稿') {
            layer.msg('恭喜您，草稿储存成功!')
            setTimeout(() => {
              window.parent.document.querySelector('#art_list').click()
            }, 1000)
          }
        })
      })
  })

  //  5.选择图片渲染图片
  $('#chooseImageBtn').on('click', function () {
    $('#chooseImageInp').click()
  })
  $('#chooseImageInp').on('change', function (e) {
    let file = e.target.files[0]

    if (file === undefined) {
      return layer.msg('文章封面不能为空!')
    }
    let newImgURL = URL.createObjectURL(file)

    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', newImgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  })
})
